*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.ul>li{
    float: left;
    list-style: none;
    width: 80px;
    height: 30px;
    background-color: red;
    overflow: hidden;
}
.s{
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transition: 0.5s;
}
.a{
    width: 80px;
    height: 30px;
    background-color: yellow;
    line-height: 30px;
    text-align: center;
    transition: 0.5s;
}
.ul>li:hover>.s{
    margin-top: -30px;
}